<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="box"  @scroll.passive="onScroll" v-if="orderList.length>0">
      <div class="item" v-for="i in orderList" :key="i._id">
        <div class="item_top">
          <p>{{ dayjs(i.time).format("YYYY-MM-DD") }}</p>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p
              style="
                color: #fff;
                background-color: #df1c41;
                padding: 0 5px;
                border-radius: 10px;
              "
            >
              取消
            </p>
          </div>
        </div>
        <div class="item_bot">
          <div class="item_bot1">
            <img src="/1.jpg" alt="" />
            <div>
              <p>{{ i.service }}</p>
              <p>理发师：{{ i?.stylistId?.name }}</p>
              <p>地址：{{ i?.salonId?.name }}</p>
              <p
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                服务：{{ i?.serviceId?.name || i?.packageId?.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-empty image-size="200" v-else description="暂无订单" />
  </van-pull-refresh>
</template>

<script setup >
import axios from "axios";
import dayjs from "dayjs";
import { ref, reactive, onMounted } from "vue";
import {
  showLoadingToast,
  showToast
} from "vant";
const orderList = ref([]);

const getorder = async () => {
  const {
    data: { data },
  } = await axios.get("/getorder");
  orderList.value = data.filter((i) => i.status == 2);
};

const loading = ref(false);
const loadingMore = ref(false);
const page = ref(1); // 当前页数
const pagesize = ref(10);
const onRefresh = async () => {
  loading.value = true;
  page.value = 1;
  orderList.value = [];
  await getorder();
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
  }, 1000);
};
// 添加触底加载功能
const handleLoadMore = async () => {
  // 防止重复加载
  if (loadingMore.value) return; 

  loadingMore.value = true;

  // 显示加载提示
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
  });

  try {
    const { data: { data } } = await axios.get(`/getorder?page=${page.value}&pagesize=${pagesize.value}`);
    
    if (data.length > 0) {
      orderList.value.push(...data.filter((i) => i.status == 0)); // 追加新数据
      page.value++; // 更新页码
    } else {
      showToast("没有更多数据了");
    }
  } catch (error) {
    console.error("加载更多数据失败", error);
  } finally {
    loadingMore.value = false; // 无论如何都要重置加载状态
  }
};
const onScroll = (event) => {
  const { scrollHeight, scrollTop, clientHeight } = event.target;
  if (scrollTop + clientHeight >= scrollHeight - 10 && !loadingMore.value) {
    handleLoadMore(); // 调用加载更多数据的方法
  }
};

onMounted(() => {
  getorder();
});
</script>
<style  scoped>
.box {
  width: 100%;
  height: 620px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow-y: auto;
}
.box::-webkit-scrollbar {
  display: none;
}

.item {
  display: flex;
  width: 100%;
  height: 150px;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin: 20px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.item_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  width: 100%;
  height: 20%;
  padding: 0 10px;
  box-sizing: border-box;
}
.item_bot {
  display: flex;
  width: 100%;
  height: 80%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.item_bot1 {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item_bot1 img {
  width: 23%;
  height: 90%;
  border-radius: 10%;
}
.item_bot1 div {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>